<template>
  <div style="width: 80%;height: 500px;">
    <FullCalendar
      id="fullCalendar2"
      ref="fullCalendar2"
      defaultView="timeGridDay"
      :defaultDate="defaultDate"
      locale="zh-cn"
      firstDay="1"
      :buttonText="buttonText"
      weekNumberCalculation="ISO"
      :eventTimeFormat="evnetTime"
      :slotLabelFormat="slotLabelFormat"
      :header="header"
      :custom-buttons="customButtons"
      :plugins="calendarPlugins"
      :events="calendarEvents"
      minTime="11:00"
      maxTime="17:00"
      @dateClick="handleDateClick()"
      @eventClick="handleEventClick()"
    />

  </div>
</template>
<script>
import FullCalendar from "@fullcalendar/vue";
import timeGridPlulgin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";

var map
export default {
  name: "calendar",
  components: {
    FullCalendar,
  },
  data () {
    return {
      calendarPlugins: [interactionPlugin, timeGridPlulgin],
      header: {
        left: "prev,next,today",
        center: "title",
        right: "timeGridWeek,timeGridDay"
      },
      customButtons: {
        prev: {
          // this overrides the prev button
          text: "PREV",
          click: e => {
            let calendarApi = this.$refs.fullCalendar2.getApi();
            calendarApi.prev();
            this.defaultDate = calendarApi.getDate();
            console.log(this.defaultDate);
            this.getListData();
          }
        },
        next: {
          // this overrides the next button
          text: "NEXT",
          click: e => {
            console.log("eventNext");
            let calendarApi = this.$refs.fullCalendar2.getApi();
            calendarApi.next(); //点击下一天/周
            this.defaultDate = calendarApi.getDate(); //获取当前视图的时间
            console.log(this.defaultDate);
            this.getListData();//赋值
          }
        },
        today: {
          text: "今天",
          click: e => {
            console.log(e);
            let calendarApi = this.$refs.fullCalendar2.getApi();
            calendarApi.today(); //点击今天的事件
            this.defaultDate = calendarApi.getDate();//获取当前视图的时间
            this.getListData();//赋值
          }
        }
      },
      buttonText: {
        today: "今天",
        month: "月",
        week: "周",
        day: "天"
      },
      slotLabelFormat: {
        hour: "numeric",
        minute: "2-digit",
        omitZeroMinute: false,
        hour12: false,
        meridiem: "short"
      },
      evnetTime: {
        hour: "numeric",
        minute: "2-digit",
        omitZeroMinute: false,
        meridiem: "short",
        hour12: false,
        firstHour: 0
      },
      businessHours: {
        dow: [1, 2, 3, 4, 5], // 周一 - 周四
        start: "11:00", // 上午10点开始
        end: "17:00" // 下午18点结束
      },
      defaultDate: new Date(),//
      calendarEvents: [],

    }
  },

  methods: {
    handleDateClick(){
      alert("aaa");
    },
    handleEventClick(){
      alert("bbb");
    },
  }
}
</script>
